<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Files
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar" ng-if="folderType">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <filter-list request="request" callback="loadFiles(pageIndex)"></filter-list>
            </nav>
        </aside>


        <!-- ----------------------------------------------------------- -->


        <div class="content-body py-3 pe-3">

            <div class="row mb-3">
                <div class="col-6">
                    <a class="btn btn-primary text-white px-3" ng-if="backUrl" href="{{backUrl}}"><i
                            class="fas fa-reply"></i>
                        Back</a>
                </div>
                <div class="col-6">
                    <mix-file-upload folder="request.key" on-success="loadFiles()">
                    </mix-file-upload>
                </div>
            </div>
            <div class="card mb-5">
                <div class="card-body">
                    <div class="col-12">
                        <table class="table table-hover table-data">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" class="col-6">
                                        Name
                                    </th>
                                    <th scope="col" class="col-3">
                                        Path
                                    </th>
                                    <th scope="col" class="col">
                                        Preview
                                    </th>
                                    <th scope="col" class="col">
                                        Actions
                                    </th>
                                </tr>
                            </thead>

                            <tbody class="sortable" ng-init="loadFiles()">
                                <tr ng-repeat="d in data.directories track by $index">
                                    <td class="text-primary">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler icon-tabler-folder me-2" width="25" height="25"
                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentcolor" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path
                                                d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
                                        </svg>
                                        <a ng-click="loadPage(d)" class="btn text-primary fw-bold" ng-bind="d"></a>
                                    </td>
                                    <td colspan="3"></td>
                                </tr>
                                <tr ng-repeat="item in data.files track by $index" class="sortable-item"
                                    sort-model="file" sort-model-id="{{item.id}}">
                                    <td>
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="icon icon-tabler icon-tabler-file me-3" width="25" height="25"
                                            viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M14 3v4a1 1 0 0 0 1 1h4" />
                                            <path
                                                d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
                                        </svg>
                                        <span ng-bind="item.fileName"></span>
                                    </td>
                                    <td>
                                        <div class="input-group input-group-sm">
                                            <input id="path-modal-{{$index}}" value="{{item.webPath}}"
                                                onclick="this.select()" class="form-control" readonly="readonly">
                                            <button class="btn btn-outline-secondary btn-clipboard" type="button"
                                                data-clipboard-target="#path-modal-{{$index}}"><i
                                                    class="mi mi-Copy"></i></button>
                                        </div>
                                    </td>
                                    <td class="preview">
                                        <img ng-if="item.webPath.indexOf('jpg') !== -1 || item.webPath.indexOf('png') !== -1 || item.webPath.indexOf('jpeg') !== -1 || item.webPath.indexOf('svg') !== -1"
                                            src="{{item.webPath}}" height="25" class="rounded" />
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                            aria-label="Actions">
                                            <a href="/portal/file/details?folder={{item.fileFolder}}&filename={{item.fileName}}{{item.extension}}"
                                                class="btn btn-link">
                                                <span class="fa fa-pen text-primary"></span>
                                            </a>
                                            <a href="{{item.webPath}}" target="_blank" class="btn btn-link">
                                                <span class="fas fa-eye text-primary"></span>
                                            </a>

                                            <button type="button" class="btn btn-link del-popover"
                                                ng-click="removeFile(item.fullPath)">
                                                <span class="fas fa-trash-alt text-danger"></span>
                                            </button>
                                            <div class="popover-body d-none">
                                                <a href="/{{currentLanguage}}/portal/files/delete/{{item.fullPath}}"
                                                    class="btn btn btn-danger">Yes, I want to delete!</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="">

                <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                    ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="loadFiles(page-1)"
                    scroll-top="true">
            </div>

        </div>
    </div>
</div>